<template>
  <div id="app">
    <h1>vue2.0 我是vue2.0应用</h1>
    <img :src="logn" />
    <div class="content_s">
      接收基座发送过来的消息：{{ count }}
      <span @click="sendMessageMaster">发送消息到基座</span>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/logo.png';
import actions from '@/shared/actions';
export default {
  name: 'App',
  data() {
    return {
      logn: logo,
      count: 0,
    }
  },
  beforeMount() {
    // 接收基座发送过来的数据信息
    // 注册观察者函数：onGlobalStateChange 第一个参数为函数回调，第二个参数为true,表示立即执行一次观察者函数
    actions.onGlobalStateChange((state) => {
      const { count } = state;
      this.count = count;
    }, true);
  },
  methods: {
    // 发送消息给基座
    sendMessageMaster() {
      actions.setGlobalState({
        count: this.count + 1,
      });
    }
  }
}
</script>

<style scoped>
.content_s {
  padding: 10px;
  height: 50px;
  background: brown;
  margin-bottom: 20px;
  color: white;
  display: flex;
  align-items: center;
}

span {
  padding: 10px;
  background: rgb(11, 181, 130);
  cursor: pointer;
  margin-left: 50px;
  border-radius: 5px;
}
</style>
